<template>
  <div>
    <Card>
      <Row class="i-p">
        <Col flex="auto">
          <h2 class="page-title">{{data.title}}</h2>
        </Col>
        <Col flex="100px" justify="middle">
          <div v-if="data.statue===0">
            <Button @click="handClick(1)" type="warning">立即处理</Button>
            <div>等待处理</div>
          </div>
          <div v-else-if="data.statue===1">
            <Button @click="handClick(2)" type="success">处理完成</Button>
            <div>正在处理中</div>
          </div>
          <div v-else>
            处理完成
          </div>
        </Col>
      </Row>
      <Row class="i-p">
        <Col span="6" offset="1">工单编号: {{data.no}}</Col>
      </Row>
      <Row class="i-p">
        <Col span="6" offset="1">工单类型: {{data.typeObj?data.typeObj.label:"--"}}</Col>
        <Col span="12">管理员: {{data.toUserObj?data.toUserObj.actualName:"--"}}</Col>
      </Row>
      <Row class="i-p">
        <Col span="6" offset="1">提交人: {{data.actualName}}</Col>
        <Col span="12">部门：{{data.departmentObj?data.departmentObj.name:"--"}}</Col>
      </Row>
      <Row class="i-p">
        <Col span="6" offset="1">联系电话：{{data.mobile}}</Col>
        <Col span="12">提交时间: {{data.createTime}}</Col>
      </Row>
      <Row class="i-p">
        <Col span="6" offset="1">预计完成时间：{{data.waitTime}}</Col>
        <Col span="12">实际完成时间: {{data.completeTime}}</Col>
      </Row>
      <Row class="i-p">
        <Col span="12" offset="1">
        可见范围：<Select v-model="data.visibleRange" @on-change="changeVisible" style="width:150px">
                    <Option :value="0" >关联人可见</Option>
                    <Option :value="1" >部门内可见</Option>
                    <Option :value="2" >公司内可见</Option>
                    <Option :value="3" >不限制</Option>
                </Select>
                注：只有处理完成的共享才会生效
        </Col>
      </Row>
       <Tabs v-model="tabsName" >
        <TabPane label="详情" name="detail">
          <div v-if="tabsName=='detail'">
            <div class="d-title">问题描述:</div>
            <div class="i-p" style="white-space: pre-line;padding:0 10px">
              {{data.problemDetails}}
            </div>
            <div class="i-p">
              <viewer :images="data.pics">
                <!-- <img :src="item.url" v-for="(item,key) in data.pics" :key="key" style="width:50px"/>  -->
                <Avatar shape="square" size="large" v-for="(item,key) in data.pics" :key="key" style="margin:5px;" :src="item.url" />
              </viewer>
            </div>
            <div class="d-title">处理意见:</div>
            <div class="i-p" v-if="data.detailList&&data.detailList.length<=0">
              暂未处理
            </div>
            <div v-else v-for="(item,key) in data.detailList" :key="key">
              <div class="i-p" style="white-space: pre-line;padding:0 10px">
                {{item.handOpinions}}
              </div>
              <div style="font-size: 12px;color: #999;">
                <Row type="flex" justify="end">
                  <div>处理人：{{item.handUser?item.handUser.employeeObj.actualName:"--"}}</div>
                </Row>
                <Row type="flex" justify="end">
                  <div>处理时间：{{item.createTime}}</div>
                </Row>
              </div>
            </div>
          </div>
        </TabPane>
        <TabPane :label="commentLabel" name="comment">
          <div v-if="tabsName=='comment'">
            <div v-for="(item,key) in data.commentList" :key="key">
              <div class="comment-head" style="font-size:12px">
                <Avatar size="large" style="margin:10px;" icon="ios-person" :src="item.createObj.avatarUrl" />
                <span>{{item.createObj.employeeObj.actualName}}</span>
              </div>
              <div style="margin-left:50px">
                <div style="color: rgb(0, 0, 0);padding: 15px 5px 5px;font-size: 18px;">
                  {{item.content}}
                </div>
                <p>{{item.createTime}}</p>
              </div>
              <!-- <hr/> -->
            </div>
          </div>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>
<script>
import { ordersApi } from '@/api/work-orders';
import { constants } from 'zlib';
import { async } from 'q';
export default {
  name: 'WorkOrderDetail',
  components: {},
  props: {},
  data () {
    // 消息信息
    return {
      data: {},
      tabsName: 'detail',
      value: '处理完成',
      waitTime:"",
      commentCnt: 0,
      commentLabel: (h) => {
        return h('div', [
          h('span', '评论(' + this.commentCnt + ')')
        ]);
      }
    };
  },
  mounted () {
    this.getData();
  },
  watch: {
    $route(to, from) {
      this.getData();
    }
  },
  methods: {
    async changeVisible () {
      let params = {};
      params.id = this.data.id;
      params.visibleRange = this.data.visibleRange;
      let res = await ordersApi.updateOrders(params);
    },
    getData () {
      let row = this.$route.params;
      if(row.id)
      this.getWorkOrderDetail(row.id);
    },
    // 获取通知详情
    async getWorkOrderDetail (id) {
      try {
        let result = await ordersApi.getWorkOrderDetail(id);
        this.data = result.data;
        this.commentCnt = result.data.commentList.length;
      } catch (e) {
        // TODO zhuoda sentry
        console.error(e);
      }
    },
    async handClick (status) {
      if (status === 1) {
        let _self = this;
        this.$Modal.confirm({
          render: (h) => {
            let hv = [
              h('span','预计完成时间: '),
              h('Date-picker', {
                props: {
                  style: "width: 200px",
                  type: 'datetime',
                  placeholder: '选择日期和时间'
                },
                on: {
                  'on-change': (val) => {
                    _self.waitTime = val;
                  },
                  'on-clear': (val) => {
                    _self.waitTime = '';
                  }
                }
              })];
            return hv;
          },
          onOk: async () => {
            console.log(this.waitTime.trim())
            if (this.waitTime.trim() == '') {
              this.$Message['error']({
                background: true,
                content: '请输入预计完成时间'
              });
              return false;
            }
            let data = {
              id: this.data.id,
              statue: status,
              waitTime: this.waitTime,
            };
            await ordersApi.handAction(data);
            this.getData();
          }
        });
      } else if (status === 2) {
        let _self = this;
        this.$Modal.confirm({
          render: (h) => {
            let hv = h('Input', {
              props: {
                ref: 'input',
                value: this.value,
                autofocus: true,
                type: 'textarea',
                rows: 4,
                placeholder: '请输入处理意见'
              },
              on: {
                input: (val) => {
                  this.value = val;
                },
                'on-focus': (val) => {
                  console.log(this);
                  _self.$refs.input.focus({
                    preventScroll: true
                  });
                }
              }
            });
            return hv;
          },
          onOk: async () => {
            if (this.value.trim() == '') {
              this.$Message['error']({
                background: true,
                content: '请输入处理意见'
              });
              return false;
            }
            let data = {
              id: this.data.id,
              statue: status,
              opinion: this.value
            };
            await ordersApi.handAction(data);
            this.getData();
          }
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.i-p{
  padding:10px;
}
.detail {
  margin-bottom: 20px;
}
.time {
  text-align: right;
  color: #999;
}
.d-title{
      border-left: 5px solid #2196f3;
    padding-left: 10px;
    font-size: 20px;
    font-weight: bold;
}
</style>
